<template>
  <div id="APIStatistics">
    <h1 class="w-title">API统计</h1>
    <div class="APIStatisticsCon">
        <div class="earlyWarningScoll">
          <p class="yuJingTitle">预警信息 ({{yuJingData.length}})</p>
            <div class="yuJingCon">
              <div class="yuJingDetail" ref="yuJingDetailWidth" v-loading="loadingYj">
                <div class="yuListWidth" ref="yuListWidth" v-for="(item, index) in yuJingData" :key="index" @click="yujingEcharts(item)">
                  {{item.interfaceName}}
                </div>
              </div>
            </div>
        </div>
      <!--折线图-->
      <div class="thisDiagram" >
        <div class="timeType">
          <div style="margin-right:10px">
            <el-radio-group v-model="radioValue" @change="radioEvent">
              <el-radio-button label="1" >24小时</el-radio-button>
              <el-radio-button label="2">48小时</el-radio-button>
              <el-radio-button label="3">一周</el-radio-button>
            </el-radio-group>
          </div>
          <el-select v-model="modelDataValue" placeholder="请选择模块" @change="changeData">
            <el-option label="请选择模块" value=""></el-option>
            <el-option v-for="item in modelData" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId"></el-option>
          </el-select>
          <el-select v-model="apiInquiry" placeholder="请选择API接口" popper-class="zIndex-popper" @change="changeDataAPI">
            <el-option label="请选择API接口" value=""></el-option>
            <el-option v-for="item in info.interfaces" :key="item.interfaceId" :label="item.interfaceName" :value="item.interfaceId"></el-option>
          </el-select>
        </div>
        <!--访问量-->
        <div  class="echartsDiv" v-loading="loadingFw">
          <v-echarts title="访问量" :xAxisData="pageViewData.xAxisData" :seriesData="pageViewData.seriesData" :echartsType="echartsType"></v-echarts>
        </div>
        <!--平均耗时-->
        <div v-loading="loadingPt" class="echartsDiv">
          <v-echarts title=' 平均访问时间' :xAxisData="averageTimeTakenData.xAxisData" :seriesData="averageTimeTakenData.seriesData" :echartsType="echartsType"></v-echarts>
        </div>
        <div class="tableReportError">
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="500">
            <el-table-column type="expand">
              <template slot-scope="props">
                <!--第二层-->
                <el-table :data="props.row.list" :show-header="false">
                  <el-table-column>
                    <template slot-scope="scope">
                      <span><span class="scopeTabelSpan">API网管访问流水ID</span> {{scope.row.jnlId}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <span><span class="scopeTabelSpan">错误码</span> {{scope.row.errorCode}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <span><span class="scopeTabelSpan">接口名称</span>{{scope.row.interfaceName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <span><span class="scopeTabelSpan">错误信息</span>{{scope.row.errorMsg}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="日期"
              min-width="210">
            </el-table-column>
            <el-table-column
              prop="errCount"
              label='报错数量'
              min-width="150">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import VEcharts from '../../../tmPaas/mobileAnalysis/csEcharts'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    components: {
      VEcharts
    },
    created () {
      this.pageView()
      this.getApiMoudel()
      this.averageTimeTaken()
      this.reportError()
      this.earlyWarning()
    },
    data () {
      return {
        dialogVisible: false,
        yuJingData: [],
        modelData: [], // 模块数据
        modelDataValue: '', // 模块选中的值
        info: '', // api接口数据
        apiInquiry: '', // api 接口选中的值
        pageViewData: { // 访问量
          xAxisData: [],
          seriesData: []
        }, // api接口访问量eacharts数据
        echartsType: 'line', // echarts 类型
        radioValue: '1', // time选中的值
        averageTimeTakenData: {
          xAxisData: [],
          seriesData: []
        },
        tableData: [],
        errorDerailList: [],
        loadingFw: true,
        loadingPt: true,
        loadingYj: true,
        yjWidth: ''
      }
    },
    methods: {
      radioEvent () {
        this.changeDataAPI(this.apiInquiry)
      },
//        预警
      earlyWarning () {
        ajax.post(api.APIWARNING).then(res => {
          this.loadingYj = false
          this.yuJingData = res
          this.$nextTick(() => {
            this.yjWidth = 200 * this.yuJingData.length + 20
            this.$refs.yuJingDetailWidth.style.width = this.yjWidth + 'px'
          })
        })
      },
//      预警数据请求
      yujingEcharts (item) {
        this.changeDataAPI(item.interface_id)
      },
//        报错量接口echarts数据
      reportError (time = '24', apiName = '') {
        let params = {
          'type': time,
          'interfaceId': apiName
        }
        ajax.post(api.APISUMERROR, params).then(res => {
          let timeArr = []
          for (let i in res) {
            res[i].time = this.timechange(res[i].time)
            timeArr.push(res[i].time)
          }
          this.tableData = res
        })
      },
//         平均耗时echarts数据
      averageTimeTaken (time = '24', apiName = '') {
        let params = {
          'type': time,
          'interfaceId': apiName
        }
        ajax.post(api.API_AVG_TIME, params).then(res => {
          this.loadingPt = false
          let arr = []
          let arrObj = []
          for (let i in res) {
            res[i].time = this.timechange(res[i].time)
            if (res[i].usingTime === '') {
              res[i].usingTime = 0
            }
            arr.push(res[i].time)
            arrObj.push(res[i].usingTime)
          }
          this.averageTimeTakenData.xAxisData = arr
          this.averageTimeTakenData.seriesData = [{'data': arrObj}]
        })
      },
      // api接口选择查找数据
      changeDataAPI (val) {
        this.loadingFw = true
        this.loadingPt = true
        let newRadio = this.radioValue
        switch (this.radioValue) {
          case '1':
            this.radioValue = '24'
            break
          case '2':
            this.radioValue = '48'
            break
          case '3':
            this.radioValue = 'week'
            break
          default:
            this.radioValue = '24'
        }
        this.pageView(this.radioValue, val)
        this.averageTimeTaken(this.radioValue, val)
        this.reportError(this.radioValue, val)
        this.radioValue = newRadio
      },
      // 下拉框数据改变
      changeData (val) {
        this.getInfo(val)
      },
      //    获取开发者账户信息
      getInfo (value) {
        this.apiInquiry = ''
        ajax.post(api.LISTINTERFACEE, {moduleId: value}).then(res => {
          this.info = res
        })
      },
      // 查询所属模块
      getApiMoudel () {
        ajax.post(api.LIST_API_MODULE_NO_PAGES, {}).then(res => {
          this.modelData = res.list
        })
      },
//        访问量echarts数据
      pageView (time = '24', apiName = '') {
        let params = {
          'type': time,
          'interfaceId': apiName
        }
        ajax.post(api.API_LIST_DATE_FLOW_DATAS, params).then(res => {
          this.loadingFw = false
          let arr = []
          let arrObj = []
          for (let i in res) {
            res[i].time = this.timechange(res[i].time)
            arr.push(res[i].time)
            arrObj.push(res[i].jnlId)
          }
          this.pageViewData.xAxisData = arr
          this.pageViewData.seriesData = [{'data': arrObj}]
        })
      },
//      时间戳 24小时转小年月日时分秒
      timechange (time) {
        let date = new Date(time)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let minute = date.getMinutes()
        let second = date.getSeconds()
        minute = minute < 10 ? ('0' + minute) : minute
        second = second < 10 ? ('0' + second) : second
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #APIStatistics
    height 100%
    .APIStatisticsCon
      width 100%
      height calc(100% - 56px)
      overflow auto
      overflow-x hidden
      margin 10px 0 0px 10px
      background #fff
      .earlyWarningScoll
        margin-left 14px
        background-color #fff
        padding-top 18px
        .yuJingTitle
          font-size 16px
        .yuJingCon
          height 100px
          padding-top 20px
          width 99%
          overflow-x auto
          .yuJingDetail
            .yuListWidth
              width 180px
              padding 12px 4px
              text-align center
              background #f56c6c
              float left
              margin-left 12px
              color #fff
              cursor pointer
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
      .tableReportError
        margin 10px 0 20px 0
      .thisDiagram
        width 100%
        height 300px
        margin-top 20px
        .timeType
          display flex
          justify-content center
      .echartsDiv
        padding 0 16px
        .v-echarts
          margin-top 10px
          width 100%
          .echarts
            width 100%
          .echarts > div > canvas
            width 100% !important
    .errorText
      display: flex
      justify-content center
      align-items center
      height 80px
      margin 0 auto
      width 90%
      color red
      border 1px solid #efefef
      border-radius 3px
    .errText
      width: 100%;
      height 300px;
      word-wrap:break-word;
      word-break:break-all;
      overflow-y auto
      margin-top 4px
      p
        margin-top 4px
      .errInfoText
        text-align center
        margin-top 100px
    .scopeTabelSpan
      color #99a9bf
      margin-right 10px
</style>
